<template>
    <div>
        <a-card title style="margin-bottom:10px">
            <div>
                <b style="margin-left: 20%">请补充工单信息：</b>

                <a-button style="margin-left:35% ; display: inline;">取消</a-button>
                <a-button
                    @click="submit"
                    type="primary"
                    style="margin-left: 30px;display: inline;"
                >提交</a-button>
            </div>
        </a-card>
        <a-card>
            <div class="form-wrapper" style="margin:20px 20% 0px 20%">
                <a-form :model="{}" :label-col-props="{ span: '3' }">
                    <a-form-item
                        v-for="item of formItems"
                        :key="item.key"
                        :label="item.label"
                        required
                    >
                        <template v-if="item.key === 'faultReason'">
                           <a-select :style="{ width: '100%' }" placeholder="请选择故障级别" v-model="dataForm.faultReason">
                                <a-option :value="0">P0</a-option>
                                <a-option :value="1">P1</a-option>
                                <a-option :value="2">P2</a-option>
                                <a-option :value="3">P3</a-option>
                                <a-option :value="4">P4</a-option>
                                <a-option :value="5">P5</a-option>
                            </a-select>
                        </template>
                        <template v-if="item.key === 'faultLevel'">
                            <a-select :style="{ width: '100%' }" placeholder="请选择故障级别" v-model="dataForm.faultLevel">
                                <a-option :value="0">P0</a-option>
                                <a-option :value="1">P1</a-option>
                                <a-option :value="2">P2</a-option>
                                <a-option :value="3">P3</a-option>
                                <a-option :value="4">P4</a-option>
                                <a-option :value="5">P5</a-option>
                            </a-select>
                        </template>
                        <template v-if="item.key === 'endTime'">
                            <a-date-picker
                                v-model="dataForm.endTime"
                                style="width: 100%; "
                                show-time
                                :time-picker-props="{ defaultValue: dayjs('09:09:06', 'HH:mm:ss') }"
                                format="YYYY-MM-DD HH:mm:ss"
                                @change="onChange"
                                @select="onSelect"
                                @ok="onOk"
                            />
                        </template>
                        <template v-if="item.key === 'respTime'">
                            <a-date-picker
                                v-model="dataForm.respTime"
                                style="width: 100%; "
                                show-time
                                :time-picker-props="{ defaultValue: dayjs('09:09:06', 'HH:mm:ss') }"
                                format="YYYY-MM-DD HH:mm:ss"
                                @change="onChange"
                                @select="onSelect"
                                @ok="onOk"
                            />
                        </template>
                        <template v-if="item.key === 'faultConclusion'">
                            <a-textarea
                                :placeholder="item.placeholder"
                                v-model="dataForm.faultConclusion"
                                require
                            />
                        </template>
                    </a-form-item>
                    <a-form-item>
                        <a-upload draggable action="/" />
                    </a-form-item>
                </a-form>
            </div>
        </a-card>
    </div>
</template>

<script lang="ts">
import dayjs from 'dayjs';
import { useRouter, useRoute } from "vue-router";
import { Message } from '@arco-design/web-vue'
import { defineComponent, ref, reactive, watch, onMounted } from 'vue'
export default defineComponent({
    name: 'BaseFormView',
    setup() {
        const router = useRouter();
        const route = useRoute();
        let formItems = reactive([
            {
                label: '故障原因',
                key: 'faultReason',
                required: true,
                type: 'input',
                value: ref(null),
                placeholder: '请输入会议名称',
                validator: function () {
                    if (!this.value.value) {
                        Message.error(this.placeholder || '')
                        return false
                    }
                    return true
                },
            },
            {
                label: '故障级别',
                key: 'faultLevel',
                required: true,
                type: 'input',
                value: ref(null),
                placeholder: '请输入会议名称',
                validator: function () {
                    if (!this.value.value) {
                        Message.error(this.placeholder || '')
                        return false
                    }
                    return true
                },
            },
            {
                label: '完成时间',
                key: 'endTime',
                required: true,
                type: 'input',
                value: ref(null),
                placeholder: '定位完成时间',
                validator: function () {
                    if (!this.value.value) {
                        Message.error(this.placeholder || '')
                        return false
                    }
                    return true
                },
            },
            {
                label: '响应时间',
                key: 'respTime',
                type: 'select',
                placeholder: '厂商第一次回复邮件时间',
                value: ref(''),
                reset: function () {
                    this.value.value = ''
                },
            },
            {
                label: '故障结论',
                key: 'faultConclusion',
                type: 'select',
                placeholder: '请输入故障结论，最多不超过200字',
                value: ref(''),
                reset: function () {
                    this.value.value = ''
                },
            },

        ])
        let dataForm = reactive({//更新完的数据
            faultReason: '',
            faultConclusion: '',
            respTime: '',
            endTime: '',
            faultLevel: null,
        });
        watch(dataForm, () => {
            console.log(dataForm)
        })
        // let dataForm = reactive({
        //     lineFault: true,
        //     linkNum: '',
        //     portMsg: '',
        //     faultTime: '',
        //     lightDecrease: false,
        //     responser: '',
        //     faultDescUrl: ''

        // })

        const getParams = () => {
            dataForm = reactive(JSON.parse(route.params.data))
            console.log('666')
            console.log(dataForm)

        }
        //  getParams()

        const submitLoading = ref(false)
        function submit() {
            //把dataform post 出去

        }

        function resetForm() {
            formItems.forEach((it) => {
                it.reset ? it.reset() : (it.value.value = '')
            })
        }
        function valideForm() {
            if (formItems.every((it) => (it.validator ? it.validator() : true))) {
                Message.success('所有表单都合法')
            }
        }
        function returnRoute() {
            router.go(-1)
        }
        function onSelect(dateString, date) {
            console.log('onSelect', dateString, date);
        }

        function onChange(dateString, date) {
            console.log('onChange: ', dateString, date);
        }

        function onOk(dateString, date) {
            console.log('onOk: ', dateString, date);
        }
        //  onMounted(getParams)
        return {
            dataForm,
            formItems,
            submitLoading,
            submit,
            resetForm,
            valideForm,
            dayjs,
            getParams,
            returnRoute,
            onSelect,
            onChange,
            onOk
        }
    },
})
</script>
